<template>
    <div class="rights">
        <el-card class="box-card">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/index/users' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>权限列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table :data="tableData" height="450" border stripe style="width: 100%;margin-top: 20px">
                <el-table-column type="index" label="#" width="50"></el-table-column>
                <el-table-column prop="authName" label="权限名称" width="180"></el-table-column>
                <el-table-column prop="path" label="路径" width="180"></el-table-column>
                <el-table-column prop="level" label="层级">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.level==0">一级</span>
                            <span v-else-if="scope.row.level==1">二级</span>
                            <span v-else>三级</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
import { getAllRightsList} from '../../http/api'
export default {
    data() {
        return {
            tableData: []
        }
    },
    methods:{
        getAllRightsList(){ //所有权限列表
            return getAllRightsList().then(res=>{
                console.log(res);
                this.tableData=res.data;
            })
        }
    },
    created(){
        this.getAllRightsList();
    }
}
</script>
<style lang="scss" scoped>
.rights{
    height: 100%;
    .box-card{
        width: 100%;
        height: 100%;
    } 
}  
</style>